<template>
	<!-- 寄售 -->
	<u-popup :show="show" @close="closeFun" mode="bottom" round="48" :safeAreaInsetBottom="false">
		<view class="sales">
			<view class="flex_y tc">
				<view class="flex1 sales__item" @click="goPages" data-url="/pagesBag/sales/sales?status=common">
					<image class="icon_img" src="/static/images/icon/sales_icon01.png" mode="aspectFill" />
					<view class="pt24">普通寄售</view>
					<view class="pt12 sales__desc">商品发布在寄售中心，等待售出</view>
				</view>
				<view class="flex1 sales__item" @click="goPages" data-url="/pagesBag/sales/sales?status=speed">
					<image class="icon_img" src="/static/images/icon/sales_icon02.png" mode="aspectFill" />
					<view class="pt24">快速寄售</view>
					<view class="pt12 sales__desc">商品7.5折直接寄售，无需等待</view>
				</view>
			</view>
			<view class="sales__close fjc mt28" @click="closeFun">
				<view class="close"></view>
			</view>
		</view>
	</u-popup>
</template>

<script>
	export default {
		props: {
			show: Boolean,

		},
		data() {
			return {}
		},
		methods: {
			closeFun() {
				this.$emit('close')
			},
			goPages(e) {
				let url = e.currentTarget.dataset.url
				uni.navigateTo({
					url
				})
				this.closeFun()
			}
		}
	}
</script>

<style lang="scss">
	.close {
		position: relative;
		width: 88rpx;
		height: 88rpx;
	}

	.close::before,
	.close::after {
		position: absolute;
		top: 25rpx;
		left: 44rpx;
		content: ' ';
		background-color: #999;
		width: 2px;
		height: 20px;
	}

	.close::before {
		transform: rotate(45deg);
	}

	.close::after {
		transform: rotate(-45deg);
	}

	.sales {
		height: 540rpx;
		background: #f8f8f8;
		border-radius: 48rpx 48rpx 0 0;
		padding-top: 64rpx;

		.sales__item {}

		.icon_img {
			width: 128rpx;
			height: 128rpx;
			margin: 0 auto;
		}

		.sales__desc {
			width: 200rpx;
			line-height: 44rpx;
			margin: 0 auto;
			color: #999;
		}

		.sales__close {
			width: 88rpx;
			height: 88rpx;
			border-radius: 50%;
			margin: 0 auto;
			background: #fff;
		}
	}
</style>